<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>用户管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        .user-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }
        .user-status.active {
            background: #28a745;
        }
        .user-status.pending {
            background: #ffc107;
        }
        .user-status.blocked {
            background: #dc3545;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="row mb-4">
            <div class="col">
                <h2>用户管理</h2>
            </div>
        </div>

        <!-- 筛选栏 -->
        <div class="card mb-4">
            <div class="card-body">
                <form th:action="@{/admin/users}" method="get" class="row g-3">
                    <div class="col-md-3">
                        <input type="text" class="form-control" name="keyword" 
                               th:value="${param.keyword}" placeholder="搜索用户名/姓名/手机号">
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" name="role">
                            <option value="">所有角色</option>
                            <option value="FARMER" th:selected="${param.role == 'FARMER'}">农户</option>
                            <option value="EMPLOYEE" th:selected="${param.role == 'EMPLOYEE'}">职工</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" name="status">
                            <option value="">所有状态</option>
                            <option value="0" th:selected="${param.status == '0'}">待审核</option>
                            <option value="1" th:selected="${param.status == '1'}">正常</option>
                            <option value="2" th:selected="${param.status == '2'}">已禁用</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search me-2"></i>搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 用户列表 -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th>用户信息</th>
                                <th>角色</th>
                                <th>联系方式</th>
                                <th>注册时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${#lists.isEmpty(users)}">
                                <td colspan="6" class="text-center">暂无用户</td>
                            </tr>
                            <tr th:each="user : ${users}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img th:src="${user.avatar ?: '/static/images/default-avatar.jpg'}"
                                             class="user-avatar me-3" alt="用户头像">
                                        <div>
                                            <h6 class="mb-0" th:text="${user.username}">用户名</h6>
                                            <small class="text-muted" th:text="${user.realName}">真实姓名</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span th:class="'badge ' + ${user.role == 'FARMER' ? 'bg-success' : 'bg-info'}"
                                          th:text="${user.role == 'FARMER' ? '农户' : '职工'}">
                                        角色
                                    </span>
                                </td>
                                <td>
                                    <div th:text="${user.phone}">手机号</div>
                                    <small class="text-muted" th:text="${user.email}">邮箱</small>
                                </td>
                                <td>
                                    <div th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm')}">
                                        注册时间
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <span th:class="'user-status ' + 
                                            ${user.status == 0 ? 'pending' : 
                                            (user.status == 1 ? 'active' : 'blocked')}"></span>
                                        <span th:text="${user.status == 0 ? '待审核' : 
                                                      (user.status == 1 ? '正常' : '已禁用')}">
                                            状态
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" 
                                                data-bs-toggle="dropdown">
                                            操作
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li th:if="${user.status == 0}">
                                                <a class="dropdown-item" href="#" 
                                                   th:onclick="'auditUser(' + ${user.id} + ', 1)'">
                                                    <i class="fas fa-check text-success me-2"></i>通过审核
                                                </a>
                                            </li>
                                            <li th:if="${user.status == 0}">
                                                <a class="dropdown-item" href="#" 
                                                   th:onclick="'auditUser(' + ${user.id} + ', 2)'">
                                                    <i class="fas fa-times text-danger me-2"></i>拒绝审核
                                                </a>
                                            </li>
                                            <li th:if="${user.status == 1}">
                                                <a class="dropdown-item" href="#" 
                                                   th:onclick="'blockUser(' + ${user.id} + ')'">
                                                    <i class="fas fa-ban text-danger me-2"></i>禁用账号
                                                </a>
                                            </li>
                                            <li th:if="${user.status == 2}">
                                                <a class="dropdown-item" href="#" 
                                                   th:onclick="'unblockUser(' + ${user.id} + ')'">
                                                    <i class="fas fa-unlock text-success me-2"></i>解除禁用
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" 
                                                   th:href="@{/admin/users/{id}/edit(id=${user.id})}">
                                                    <i class="fas fa-edit text-primary me-2"></i>编辑信息
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="#" 
                                                   th:onclick="'resetPassword(' + ${user.id} + ')'">
                                                    <i class="fas fa-key text-warning me-2"></i>重置密码
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <nav th:if="${totalPages > 1}" class="mt-4">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/admin/users(page=${currentPage - 1}, keyword=${param.keyword}, role=${param.role}, status=${param.status})}">
                                上一页
                            </a>
                        </li>
                        <li class="page-item" th:each="pageNum : ${#numbers.sequence(1, totalPages)}"
                            th:classappend="${pageNum == currentPage} ? 'active'">
                            <a class="page-link" th:href="@{/admin/users(page=${pageNum}, keyword=${param.keyword}, role=${param.role}, status=${param.status})}"
                               th:text="${pageNum}">1</a>
                        </li>
                        <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
                            <a class="page-link" th:href="@{/admin/users(page=${currentPage + 1}, keyword=${param.keyword}, role=${param.role}, status=${param.status})}">
                                下一页
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <script th:inline="javascript">
        function auditUser(userId, status) {
            const action = status === 1 ? '通过' : '拒绝';
            if (confirm(`确定要${action}这个用户的审核吗？`)) {
                fetch(`/admin/users/${userId}/audit`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ status: status })
                }).then(response => {
                    if (response.ok) {
                        location.reload();
                    }
                });
            }
        }

        function blockUser(userId) {
            if (confirm('确定要禁用这个用户吗？')) {
                fetch(`/admin/users/${userId}/block`, {
                    method: 'POST'
                }).then(response => {
                    if (response.ok) {
                        location.reload();
                    }
                });
            }
        }

        function unblockUser(userId) {
            if (confirm('确定要解除这个用户的禁用状态吗？')) {
                fetch(`/admin/users/${userId}/unblock`, {
                    method: 'POST'
                }).then(response => {
                    if (response.ok) {
                        location.reload();
                    }
                });
            }
        }

        function resetPassword(userId) {
            if (confirm('确定要重置这个用户的密码吗？')) {
                fetch(`/admin/users/${userId}/reset-password`, {
                    method: 'POST'
                }).then(response => {
                    if (response.ok) {
                        return response.json();
                    }
                }).then(data => {
                    alert(`密码已重置为: ${data.password}`);
                });
            }
        }
    </script>
</body>
</html> 